<template>
  <div class="ms-drawer-base" :style="{left: visible?leftWidth:('-'+(parseInt(width)+20+'px')),width: width}">
    <div class="container">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "ms-drawer-base",
  props: {
    visible: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    width: {
      type: String,
      default: () => {
        return "300px"
      }
    },
    leftWidth: {
      type: String,
      default: () => {
        return "0"
      }
    }
  },
  data() {
    return {}
  }
}
</script>
<style scoped lang="scss">
.ms-drawer-base {
  height: 100%;
  position: fixed;
  //transition: all .4s;
  top: 0;
  background: white;
  z-index: 99;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  //box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .3);

  .closed {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 99;
  }

  .container {
    width: 100%;
    height: 100%;
  }
}
</style>
